// 引入css样式
require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("../../assets/css/common.css");
require("../../assets/font_44fp3ls0tzq/iconfont.css");
require("../../assets/css/tabbar.less");
require("./mime-modify.less");

// 引入模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");

document.addEventListener("DOMContentLoaded", function () {
    // 1.点击回退到上一页
    dom.get("#backBtn").addEventListener("click", function () {
        history.back();
    })

    // 2.性别选择框
    dom.get("#gender").addEventListener("click", function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }, {
            label: '未知',
            value: 2
        }], {
            onConfirm: function (result) {
                dom.get("#gender").textContent = result[0].label;
                dom.get("#gender").dataset.value = result[0].value;
            },
            title: '性别选择器'
        })
    })

    // 3.生日选择框
    dom.get("#birthday").addEventListener("click", function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                dom.get("#birthday").textContent = result.map(v => v.value).join("-");//拿到结果中的value值进行拼接返回
            },
            title: '生日选择器'
        })
    })

    // 4.省份选择框
    let provinceId = 0;
    dom.get("#province").addEventListener("click", async function () {
        let proArr = [];
        //异步代码
        await axios.get("api/shared/province").then(res => {
            if (res.data.errno === 0) {
                proArr = res.data.data.map(v => {
                    return { label: v.name, value: v.id };
                });

            }
        });
        weui.picker(proArr, {
            onConfirm: function (result) {
                dom.get("#province").textContent = result[0].label;
                provinceId = result[0].value;//选中的省份ID
                dom.get("#province").dataset.value = result[0].value;
            },
            title: '省份选择器'
        })
    })


    // 5.城市选择框
    dom.get("#city").addEventListener("click", async function () {
        // 判断是否选中省份
        if (provinceId === 0) {
            alert("请选择省份");
            return;
        }
        let cityArr = [];
        //异步代码
        await axios.get("/api/shared/city", {
            params: { provinceId }
        }).then(res => {
            if (res.data.errno === 0) {
                cityArr = res.data.data.map(v => {
                    return { label: v.name, value: v.id };
                });
            }
        });
        weui.picker(cityArr, {
            onConfirm: function (result) {
                console.log(result);
                dom.get("#city").textContent = result[0].label;
                dom.get("#city").dataset.value = result[0].value;
            },
            title: '省份选择器'
        })
    })

    // 6.签名
    dom.get("#sign").addEventListener("input", function () {
        dom.get("#textNum").textContent = this.value.length;
    })

    // 7.头像上传
    dom.get("#avatorInput").addEventListener("change", function () {
        let fd = new FormData();
        fd.append('file', this.files[0]);
        // 将上传的文件上传到服务器
        axios.post("/api/shared/uploadPortrait", fd).then(res => {
            if (res.data.errno === 0) {//上传成功
                // 将图片更改
                dom.get("#userImg").src = axios.default.baseURL + axios.data.data.url;
                dom.get("#userImg").dataset.value = axios.data.data.url;
            } else {
                alert("上传失败")
            }
        })
    })


    // 8.上传修改的个人资料
    dom.get("#saveBtn").addEventListener("click", function () {
        // 获取到修改后的数据,通过自定义属性身上获取
        let nickName = dom.get("#nickName").value;
        let gender = Number(dom.get("#gender").dataset.value);
        let provinceId = Number(dom.get("#province").dataset.value);
        let cityId = Number(dom.get("#city").dataset.value);
        let birthday = dom.get("#birthday").textContent;
        let imgUrl = dom.get("#userImg").dataset.value;
        let sign = dom.get("#sign").value;

        // 发请求
        axios.post("/api/user/changeInfo", {
            nickName,
            gender,
            provinceId,
            cityId,
            birthday,
            imgUrl,
            sign,
        }).then(res => {
            if (res.data.errno === 0) {
                localStorage.setItem('token', res.data.data.token);
                history.back();
                alert("修改成功")
            } else {
                alert("修改失败")

            }
        })
    })

    // 9.个人信息回填
    axios.get("/api/user/info").then(async (res) => {
        let data = res.data.data;
        // 头像
        if (data.imgUrl) {
            dom.get("#userImg").src = axios.defaults.baseURL + data.imgUrl;
            dom.get('#userImg').dataset.value = data.imgUrl;
        }
        // 昵称
        dom.get("#nickName").value = data.nickName;
        // 生日
        dom.get("#birthday").textContent = data.birthday;
        // 省份
        let pro = await axios.get("/api/shared/province");
        let [province] = pro.data.data.filter(v => v.id === data.provinceId);
        dom.get("#province").textContent = province.name;
        dom.get("#province").dataset.value = data.provinceId;//data.provinceId初始化id，若是没有这句，当用户不该数据，就没有自定义属性，在手搜集信息的时候拿不到数据
        // 城市
        let city = await axios.get('/api/shared/city?provinceId=' + data.provinceId);
        let [curCity] = city.data.data.filter(v => v.id === data.cityId);
        dom.get('#city').textContent = curCity.name;
        dom.get('#city').dataset.value = data.cityId;
        // 个性签名
        dom.get('#sign').value = data.sign;
        dom.get('#textNum').textContent = data.sign.length;

        // 性别
        let genderArr = ['男', '女', '保密'];
        dom.get('#gender').textContent = genderArr[data.gender];
        dom.get('#gender').dataset.value = data.gender || 0;
    })



})